<template>
  <div id="app">
    <el-select v-model="value" filterable placeholder="请选择模板" size="small" style="float:right;margin-top:6px;margin-right:6px;" @change="selectModel">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-button size="small" style="float:right;margin-top:6px;margin-right:6px;" @click="handleSave">打印json</el-button>
    <el-button size="small" style="float:right;margin-top:6px;margin-right:6px;" @click="()=>{this.$refs['wfd'].graph.saveXML()}">导出XML</el-button>
    <el-button size="small" style="float:right;margin-top:6px;margin-right:6px;" @click="()=>{this.modalVisible=true}">查看流程图</el-button>
    <wfd-vue ref="wfd" :data="demoData" :height="800" :users="candidateUsers" :groups="candidateGroups" :lang="lang" v-if="isFlag"/>
    <el-dialog title="查看流程图" :visible.sync="modalVisible" width="60%">
        <wfd-vue ref="wfd" :data="demoData1" :height="300" isView  />
    </el-dialog>
  </div>
</template>

<script>
import WfdVue from './Wfd'
export default {
  name: 'app',
  components:{
    WfdVue
  },
  data () {
    return {
      isFlag:true,
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
      screenHeight:document.body.clientHeight - 48,
      modalVisible:false,
      lang: "zh",
        xml:`<?xml version="1.0" encoding="UTF-8"?>
        <bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
                           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                           xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
                           xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
                           targetNamespace="http://bpmn.io/schema/bpmn"
                           xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
          <bpmn2:process id="4343" name="454545" isExecutable="true">
            <bpmn2:documentation>666666</bpmn2:documentation>
          </bpmn2:process>
          <bpmndi:BPMNDiagram id="BPMNDiagram_1">
            <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="process1567044459787">
              <bpmndi:BPMNShape id="StartEvent_01ydzqe_di" bpmnElement="StartEvent_01ydzqe">
                <dc:Bounds x="242" y="212" width="36" height="36" />
                <bpmndi:BPMNLabel>
                  <dc:Bounds x="247" y="263" width="25" height="14" />
                </bpmndi:BPMNLabel>
              </bpmndi:BPMNShape>
            </bpmndi:BPMNPlane>
          </bpmndi:BPMNDiagram>
        </bpmn2:definitions>`,
      test:{
        nodes: [{ id: 'startNode1', x: 50, y: 200, label: '', clazz: 'start', },
          { id: 'startNode2', x: 50, y: 320, label: '', clazz: 'timerStart', },
          { id: 'taskNode1', x: 200, y: 200, label: '主任审批', clazz: 'userTask',  },
          { id: 'taskNode2', x: 400, y: 200, label: '经理审批', clazz: 'scriptTask',  },
          { id: 'gatewayNode', x: 400, y: 320, label: '金额大于1000', clazz: 'inclusiveGateway',  },
          { id: 'taskNode3', x: 400, y: 450, label: '董事长审批', clazz: 'receiveTask', },
          { id: 'endNode', x: 600, y: 320, label: '', clazz: 'end', }],
        edges: [{ source: 'startNode1', target: 'taskNode1', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
          { source: 'startNode2', target: 'gatewayNode', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
          { source: 'taskNode1', target: 'taskNode2', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
          { source: 'taskNode2', target: 'gatewayNode', sourceAnchor:1, targetAnchor:0, clazz: 'flow' },
          { source: 'taskNode2', target: 'taskNode1', sourceAnchor:2, targetAnchor:2, clazz: 'flow' },
          { source: 'gatewayNode', target: 'taskNode3', sourceAnchor:2, targetAnchor:0, clazz: 'flow' },
          { source: 'gatewayNode', target: 'endNode', sourceAnchor:1, targetAnchor:2, clazz: 'flow'},
          { source: 'taskNode3', target: 'endNode', sourceAnchor:1, targetAnchor:1, clazz: 'flow' },
          ]
      },
      demoData: {
        // nodes: [{ id: 'startNode1', x: 50, y: 200, label: '', clazz: 'start', },
        //   { id: 'startNode2', x: 50, y: 320, label: '', clazz: 'timerStart', },
        //   { id: 'taskNode1', x: 200, y: 200, label: '主任审批', clazz: 'userTask',  },
        //   { id: 'taskNode2', x: 400, y: 200, label: '经理审批', clazz: 'scriptTask',  },
        //   { id: 'gatewayNode', x: 400, y: 320, label: '金额大于1000', clazz: 'inclusiveGateway',  },
        //   { id: 'taskNode3', x: 400, y: 450, label: '董事长审批', clazz: 'receiveTask', },
        //   { id: 'catchNode1', x: 600, y: 200, label: '等待结束', clazz: 'signalCatch', },
        //   { id: 'endNode', x: 600, y: 320, label: '', clazz: 'end', }],
        // edges: [{ source: 'startNode1', target: 'taskNode1', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
        //   { source: 'startNode2', target: 'gatewayNode', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
        //   { source: 'taskNode1', target: 'catchNode1', sourceAnchor:0, targetAnchor:0, clazz: 'flow' },
        //   { source: 'taskNode1', target: 'taskNode2', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
        //   { source: 'taskNode2', target: 'gatewayNode', sourceAnchor:1, targetAnchor:0, clazz: 'flow' },
        //   { source: 'taskNode2', target: 'taskNode1', sourceAnchor:2, targetAnchor:2, clazz: 'flow' },
        //   { source: 'gatewayNode', target: 'taskNode3', sourceAnchor:2, targetAnchor:0, clazz: 'flow' },
        //   { source: 'gatewayNode', target: 'endNode', sourceAnchor:1, targetAnchor:2, clazz: 'flow'},
        //   { source: 'taskNode3', target: 'endNode', sourceAnchor:1, targetAnchor:1, clazz: 'flow' },
        //   { source: 'catchNode1', target: 'endNode', sourceAnchor:1, targetAnchor:0, clazz: 'flow' }],
      },
      demoData1:{
        nodes: [{ id: 'startNode1', x: 50, y: 200, label: '', clazz: 'start', },
          { id: 'startNode2', x: 50, y: 320, label: '', clazz: 'timerStart', },
          { id: 'taskNode1', x: 200, y: 200, label: '主任审批', clazz: 'userTask',  },
          { id: 'taskNode2', x: 400, y: 200, label: '经理审批', clazz: 'scriptTask', active:true },
          { id: 'gatewayNode', x: 400, y: 320, label: '金额大于1000', clazz: 'gateway',  },
          { id: 'taskNode3', x: 400, y: 450, label: '董事长审批', clazz: 'receiveTask', },
          { id: 'catchNode1', x: 600, y: 200, label: '等待结束', clazz: 'signalCatch', },
          { id: 'endNode', x: 600, y: 320, label: '', clazz: 'end', }],
        edges: [{ source: 'startNode1', target: 'taskNode1', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
          { source: 'startNode2', target: 'gatewayNode', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
          { source: 'taskNode1', target: 'catchNode1', sourceAnchor:0, targetAnchor:0, clazz: 'flow' },
          { source: 'taskNode1', target: 'taskNode2', sourceAnchor:1, targetAnchor:3, clazz: 'flow' },
          { source: 'taskNode2', target: 'gatewayNode', sourceAnchor:1, targetAnchor:0, clazz: 'flow' },
          { source: 'taskNode2', target: 'taskNode1', sourceAnchor:2, targetAnchor:2, clazz: 'flow' },
          { source: 'gatewayNode', target: 'taskNode3', sourceAnchor:2, targetAnchor:0, clazz: 'flow' },
          { source: 'gatewayNode', target: 'endNode', sourceAnchor:1, targetAnchor:2, clazz: 'flow'},
          { source: 'taskNode3', target: 'endNode', sourceAnchor:1, targetAnchor:1, clazz: 'flow' },
          { source: 'catchNode1', target: 'endNode', sourceAnchor:1, targetAnchor:0, clazz: 'flow' }],
          groups:[]
      },
      candidateUsers: [{id:'1',name:'Tom'},{id:'2',name:'Steven'},{id:'3',name:'Andy'}],
      candidateGroups: [{id:'1',name:'Manager'},{id:'2',name:'Security'},{id:'3',name:'OA'}],
    }
  },
  created(){
    this.init()
  },
  methods:{
    init(){
      this.isFlag = false
      let modelId ='12b0db4299ece334825d7c57e4d1531f'
      this.$http.get(`/api/flow/v1/model/${modelId}`).then(res=>{
          let result = JSON.parse(res.data.data.g6Json)
          this.demoData = Object.assign({},result)
          this.isFlag = true
          this.$forceUpdate()
        }).catch(err=>{
          console.log(err)
        })
    },
    selectModel(val){
      // console.log(val)
      // this.demoData = {}
      this.isFlag = false
      this.$nextTick(()=>{
        this.isFlag = true
      })
      if(val=='选项1'){
        this.demoData= Object.assign({},this.test)
        this.$forceUpdate()
      }else{
         this.demoData= Object.assign({},this.demoData,this.demoData1)
         this.$forceUpdate()
      }
    },
    handleSave(){
      console.log(this.$refs['wfd'].graph.saveXML())
      console.log(this.$refs['wfd'].graph.save())
      // console.log(this.$refs['wfd'].getVal())
      this.save()
    },
    save(){  
        let params = {
          bpmnXml: this.$refs['wfd'].graph.saveXML(),
          itemCode:'',
          g6Json: JSON.stringify(this.$refs['wfd'].graph.save()),
          modelId:'',
          modelKey:this.$refs['wfd'].getVal().id,
          modelName:this.$refs['wfd'].getVal().name,
          modelType:''
        }
        // console.log(params)
        this.$http.post('/api/flow/v1/model', params).then(res=>{
          // console.log(process.env.NODE_ENV)
          console.log(res)
        }).catch(err=>{
          console.log(err)
        })
      },
  },
  mounted() {
    // this.init()
    const that = this
        window.onresize = () => {
          return (() => {
            window.screenHeight = document.body.clientHeight
            that.screenHeight = (window.screenHeight - 47)
            // console.log(that.screenHeight )
          })()
        }
    // console.log(JSON.stringify(this.xml))
    // this.demoData = JSON.stringify(this.xml)
    // console.log(`calc(100% - 100px)`)
  }
}
</script>

<style>
html,body{
  padding:0;
  margin:0 ;
  height:100%;
}
*{
  padding:0;
  margin:0 ;
  box-sizing: border-box;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  /* color: #2c3e50; */
  padding: 0;
  margin:0;
}
</style>
